<template>
  <el-dialog
    class="modify-class"
    width="96%"
    visible
    append-to-body
    :title="title"
    :close-on-click-modal="true"
    :before-close="beforeClose"
  >
    <div style="margin:20px 0;">
      <component :is="billType.componentId" v-bind="billType.props" :loading="loading" :list="tableData" @refresh="refresh"/>
      <div style="padding: 10px;text-align: center;">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageOption.pageSize"
          :total="pageOption.total"
          :page-sizes="pageOption.sizes"
          @size-change="sizeCurrentChange"
          @current-change="pageCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import DeviceTable from '../progress/table/DeviceTable'
import ExperimenTable from '../progress/table/ExperimentTable'
import SystemTable from '../progress/table/SystemTable'
import QualityTable from '../quality/QualityTable'
import TechnologyTable from '../technology/TechnologyTable'

import progressApi from "@/apis/overview/progress.js";
import { overviewApis } from "@/apis";
import qualityApi from '@/apis/overview/quality'
import technologyApi from '@/apis/overview/technology.js'


// 办理详情弹窗
export default {
  components: {
    DeviceTable,
    SystemTable,
    ExperimenTable,
    QualityTable,
    TechnologyTable,
  },
  props: {
    modelId: {
      type: [String, Number],
      default: ''
    },
    billTypeCode: {
      type: String,
      default: 'PRO_DEVICE'
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      pageOption: {
        page: 1,
        pageSize: 10,
        total: 0,
        sizes: [5, 10, 20, 30, 40, 50, 100]
      },
      loading: false,
      tableData: [],
      // 业务类型
      billTypeMap: {
        PRO_DEVICE: {
          componentId: DeviceTable,
          props: {
            height: '500px'
          },
          promiseApi: progressApi.progressDeviceFindPageInfo,
          desc: '进度管理-单机进度详情',
        },
        PRO_EXP: {
          componentId: ExperimenTable,
          props: {
            height: '500px'
          },
          promiseApi: overviewApis.progressExperimentFindPageList,
          desc: '进度管理-综合实验进度',
        },
        PRO_READY: {
          componentId: SystemTable,
          props: {
            height: '500px'
          },
          promiseApi: overviewApis.progressReadyFindPageList,
          desc: '进度管理-系统交付进度',
        },
        QUALITY: {
          componentId: QualityTable,
          props: {
            disabled: true,
            isDelete: false,
            height: '500px'
          },
          promiseApi: qualityApi.findPageList,
          desc: '质量问题',
        },
        TECH_TMP_SYS: {
          componentId: TechnologyTable,
          props: {
            deviceOrSystem: 'SYSTEM',
            billType: 'TEMP',
            disabled: true,
            isDelete: false,
            height: '500px'
          },
          promiseApi: technologyApi.technologyList,
          desc: '系统技术状态偏离',
        },
        TECH_TMP_DEV: {
          componentId: TechnologyTable,
          props: {
            deviceOrSystem: 'DEVICE',
            billType: 'TEMP',
            disabled: true,
            isDelete: false,
            height: '500px'
          },
          promiseApi: technologyApi.technologyList,
          desc: '单机技术状态偏离',
        },
        TECH_NOR_SYS: {
          componentId: TechnologyTable,
          props: {
            deviceOrSystem: 'SYSTEM',
            billType: 'NORMAL',
            disabled: true,
            isDelete: false,
            height: '500px'
          },
          promiseApi: technologyApi.technologyList,
          desc: '系统技术状态变更',
        },
        TECH_NOR_DEV: {
          componentId: TechnologyTable,
          props: {
            deviceOrSystem: 'DEVICE',
            billType: 'NORMAL',
            disabled: true,
            isDelete: false,
            height: '500px'
          },
          promiseApi: technologyApi.technologyList,
          desc: '单机技术状态变更',
        },
      },
      enableRefresh: false,
    }
  },
  computed: {
    billType() {
      console.log(this.billTypeCode)
      return this.billTypeMap[this.billTypeCode]
    },
    title() {
      return this.billType.desc
    },
  },
  watch: {
    modelId() {
      this.requestData()
    }
  },
  methods: {
    close() {
      this.$emit('close', this.enableRefresh)
    },
    beforeClose() {
      this.close()
    },
    refresh() {
      this.requestData()
      this.enableRefresh = true
    },
    sizeCurrentChange(size) {
      this.pageOption.pageSize = size
      this.requestData()
    },
    pageCurrentChange(page) {
      this.pageOption.page = page
      this.requestData()
    },
    requestData() {
      const {page, pageSize} = this.pageOption
      let params = {...this.params}
      if (this.billTypeCode.indexOf('TECH') == 0) {
        params.type = this.billType.props.deviceOrSystem
        params.billType = this.billType.props.billType
      }
      this.loading = true
      this.billType.promiseApi({
        modelId: this.modelId,
        ...params,
        pageNum: page,
        pageSize
      }).then(res => {
        const {list, total} = res.data
        this.tableData = list.map((item) => {
          return {
            ...item,
            edit: false,
          };
        });
        this.pageOption.total = total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
  mounted() {
    if (this.modelId) {
      this.requestData()
    }
  }
}
</script>

<style></style>
